import React from 'react';
import { Layout, Dropdown, Menu } from 'antd';
import TopMenu from './TopMenu/index';
import { UserOutlined } from '@ant-design/icons';
import useRouter from 'components/hooks/useRouter';
import { logout } from 'api/Login';
import useLocalStorage from 'components/hooks/useLocalStorage';
const { Header, Content, Footer } = Layout;

const LayoutPage = (props: any) => {
    const router = useRouter();
    const [ userName, setUserName ]= useLocalStorage('userName', '');
    const onClick = ({ key }: { key: string }) => {
        if (key === 'logout') {
            logout().then(() => {
                router.push('/login');
            });
        }
    };
    return (
        <Layout className="layout">
            <Header
                className="flex-between"
                style={{ position: 'fixed', zIndex: 1, width: '100%', backgroundColor: '#fff' }}
            >
                <TopMenu></TopMenu>
                <Dropdown
                    overlay={() => (
                        <Menu onClick={onClick}>
                            <Menu.Item key="changePwd">修改密码</Menu.Item>
                            <Menu.Item key="logout">退出登录</Menu.Item>
                        </Menu>
                    )}
                >
                    <span className="pointer">
                        <span className="mr10">{userName}</span>
                        <UserOutlined />
                    </span>
                </Dropdown>
            </Header>
            <Content style={{ marginTop: 64 }}>{props.children}</Content>
            {/* <Footer className="text-center">{new Date().getTime()}</Footer> */}
        </Layout>
    );
};
export default LayoutPage;
